<template>
  <div class="order-book">
    <div class="g-card-title">{{ title }}</div>
    <div class="thead">
      <div class="tr" v-if="type === '01'">
        <div class="th">
          <span>{{ $t("table_price") }}</span>
          <span class="symbol">({{ symbol.quoteAsset }})</span>
        </div>
        <div class="th">
          <span>{{ $t("table_size") }}</span>
          <span class="symbol">({{ symbol.baseAsset }})</span>
        </div>
        <div class="th">
          <span>{{ $t("table_sum") }}</span>
          <span class="symbol">({{ symbol.baseAsset }})</span>
        </div>
      </div>
      <div class="tr" v-else>
        <div class="th">
          <span>{{ $t("table_price") }}</span>
          <span class="symbol">({{ symbol.quoteAsset }})</span>
        </div>
        <div class="th">
          <span>{{ $t("table_amount") }}</span>
          <span class="symbol">({{ symbol.baseAsset }})</span>
        </div>
        <div class="th">
          <span>{{ $t("table_time") }}</span>
        </div>
      </div>
    </div>
    <div class="tbody">
      <div
        class="tgroup"
        v-for="(rows, r) in list"
        :key="r"
        :class="type === '01' && r === 0 ? 'tgroup-fixed' : ''"
      >
        <div class="trows" :id="type === '01' && r === 0 ? 'trows-fixed' : ''">
          <div
            class="tr"
            v-for="(item, i) in rows"
            :key="i"
            @click="change(item)"
            :class="{ on: item.mid, empty: !item.price && !item.qty, sell: item.update === 1 && r === 0, buy: item.update === 1 && r === 2 }"
          >
            <div class="td" :class="{ red: item.red, green: item.green }">
              <span>{{ item.price }}</span>
              <i v-if="item.usdt">/ {{ item.usdt }}</i>
              <svg
                v-if="item.mid"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                class="arrow-icon"
                style=""
              >
                <path
                  d="M5 13.47l1.41-1.41 5.1 5.1V3h1.99v14.15l5.09-5.09L20 13.47l-7.5 7.5-7.5-7.5z"
                  fill="currentColor"
                ></path>
              </svg>
            </div>
            <div class="td">
              <span>{{ item.quantity }}</span>
            </div>
            <div class="td">
              <span>{{
                type === "01" ? item.sum : formatTime(item.time)
              }}</span>
              <div
                class="percent"
                :class="{
                  red: item.percent && item.red,
                  green: item.percent && item.green,
                }"
                :style="{ width: item.percent }"
                v-if="item.percent"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderBook",
  props: {
    type: {
      type: String,
      default: "01",
    },
    list: {
      type: Array,
      default() {
        return [];
      },
      require: true,
    },
    pairCode: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    symbol: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  filters: {
    formatNumber(val) {
      return Number(val).toFixed(2);
    },
  },
  watch: {
    list(newval, oldval) {
      if (newval && newval.length && (!oldval || !oldval.length)) {
        this.scrollToBottom();
      }
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.scrollToBottom();
    });
  },
  methods: {
    scrollToBottom(i) {
      i = i || 0;
      this.$nextTick(() => {
        const el = document.getElementById("trows-fixed");
        if (!el) return;
        const tgroup =
          el.parentElement.parentElement.getElementsByClassName("tgroup");
        console.log("tgroup", tgroup[0].clientHeight);
        const maxHeight0 = 22 * Math.floor(tgroup[0].clientHeight / 22);
        const maxHeight2 = 22 * Math.floor(tgroup[2].clientHeight / 22);
        const maxHeight = maxHeight0 > maxHeight2 ? maxHeight2 : maxHeight0;
        tgroup[0].children[0].style.maxHeight = maxHeight + "px";
        tgroup[2].children[0].style.maxHeight = maxHeight + "px";
        if (maxHeight < 100 && this.list.length > 5 && i < 10) {
          setTimeout(() => {
            this.scrollToBottom(+i === 0 ? 1 : ++i);
          }, 500);
        }
        el.scrollTop = el.scrollHeight;
      });
    },
    formatTime(val) {
      const dt = new Date(+val);
      const hours = dt.getHours();
      const minutes = dt.getMinutes();
      const seconds = dt.getSeconds();
      return `${hours > 9 ? hours : "0" + hours}:${
        minutes > 9 ? minutes : "0" + minutes
      }:${seconds > 9 ? seconds : "0" + seconds}`;
    },
    change(target) {
      const { price } = target;
      this.$emit("change", +price);
    },
  },
};
</script>

<style lang="scss" scoped>
.order-book {
  min-width: 280px;
  display: flex;
  flex-direction: column;
  position: relative;

  @media (max-width: 1400px) {
    min-width: 210px;
    .thead {
      .show {
        display: flex !important;
      }
    }
  }
  .thead {
    margin-top: 10px;
    margin-right: 7px;
    display: flex;
    width: 100%;
    tr {
      flex: 1;
    }
  }
  .tbody {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 -15px;
    .tr {
      position: relative;
      padding: 0 15px;
      box-sizing: border-box;
      cursor: pointer;
      &:hover {
        background: rgba(255, 255, 255, 0.03);
      }

      &.sell {
        animation: sellAni 500ms
      }

      &.buy {
        animation: buyAni 500ms
      }

      @keyframes sellAni {
        0% {
          background-color: rgba(255, 59, 105, 0.25);
        }
        100% {
          background-color: unset;
        }
      }

      @keyframes buyAni {
        0% {
          background-color: rgba(2, 199, 122, 0.25);
        }
        100% {
          background-color: unset;
        }
      }

      .percent {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        opacity: 0.1;
        &.red {
          background-color: var(--color-red);
        }

        &.green {
          background-color: var(--color-green);
        }
      }
    }

    .empty {
      height: 23px;
    }

    .on {
      .td {
        font-size: 16px;
        padding-top: 15px;
        padding-bottom: 15px;
        display: flex;
        align-items: center;
        i {
          font-style: normal;
          font-size: 12px;
          color: var(--color-des);
          margin-left: 5px;
        }
        &.red {
          .arrow-icon {
            transform: rotate(0deg);
          }
        }
        .arrow-icon {
          width: 16px;
          margin-left: 3px;
          transform: rotate(180deg);
        }
      }
    }
  }
  .tgroup {
    flex: 1;
    position: relative;
    &:nth-child(2) {
      flex: none;
      height: 46px;
    }
    &.tgroup-fixed {
      .trows {
        top: auto;
        max-height: 100%;
      }
    }
  }
  .trows {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .tr {
    display: flex;
    width: 100%;
  }

  .th,
  .td {
    flex: 1;
    padding: 5px 10px 5px 0;
    text-align: right;
    white-space: nowrap;

    &:first-child {
      text-align: left;
    }
    &:last-child {
      padding-right: 0;
      flex: 1.25;
    }
  }

  .th {
    line-height: 20px;
    color: var(--color-des);
    padding-top: 0px;

    span {
      font-size: 12px;
      font-family: "Roboto Regular";
      &.symbol {
        font-size: 10px;
      }
    }
  }

  .td {
    font-size: 12px;
    line-height: 1;
    font-family: "Roboto Regular";
    color: var(--color);
    .arrow-icon {
      display: none;
    }
    &.red {
      color: var(--color-red);
      .arrow-icon {
        display: inline;
      }
    }

    &.green {
      color: var(--color-green);
      .arrow-icon {
        display: inline;
      }
    }
  }
}
</style>
